<template>
  <view class="company-register-page">
    <u-navbar title="物业公司注册" :border="false" bg-color="#667eea" title-color="#fff"></u-navbar>
    
    <view class="register-form">
      <u-form :model="formData" :rules="formRules" ref="formRef">
        <view class="form-section">
          <view class="section-title">基本信息</view>
          
          <u-form-item label="公司名称" prop="companyName">
            <u-input v-model="formData.companyName" placeholder="请输入公司名称" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="公司编码" prop="companyCode">
            <u-input v-model="formData.companyCode" placeholder="请输入公司编码" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="统一社会信用代码" prop="creditCode">
            <u-input v-model="formData.creditCode" placeholder="请输入统一社会信用代码" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="营业执照号" prop="businessLicense">
            <u-input v-model="formData.businessLicense" placeholder="请输入营业执照号" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="法定代表人" prop="legalRepresentative">
            <u-input v-model="formData.legalRepresentative" placeholder="请输入法定代表人" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="成立日期" prop="establishedDate">
            <u-datetime-picker
              :show="showDatePicker"
              v-model="formData.establishedDate"
              mode="date"
              @confirm="onDateConfirm"
              @cancel="showDatePicker = false"
            ></u-datetime-picker>
            <u-input 
              v-model="formData.establishedDate" 
              placeholder="请选择成立日期" 
              readonly 
              @click="showDatePicker = true"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="注册资本(万元)" prop="registeredCapital">
            <u-input 
              v-model="formData.registeredCapital" 
              placeholder="请输入注册资本" 
              type="number"
              clearable
            ></u-input>
          </u-form-item>
          
          <u-form-item label="资质等级" prop="qualificationLevel">
            <u-picker :show="showQualificationPicker" :columns="qualificationColumns" @confirm="onQualificationConfirm"></u-picker>
            <u-input v-model="formData.qualificationLevel" placeholder="请选择资质等级" readonly @click="showQualificationPicker = true"></u-input>
          </u-form-item>
          
          <u-form-item label="公司地址" prop="address">
            <u-input v-model="formData.address" placeholder="请输入公司地址" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="服务范围" prop="serviceScope">
            <u-textarea 
              v-model="formData.serviceScope" 
              placeholder="请输入服务范围" 
              :maxlength="500"
              :count="true"
              height="120"
            ></u-textarea>
          </u-form-item>
          
          <u-form-item label="公司简介" prop="introduction">
            <u-textarea 
              v-model="formData.introduction" 
              placeholder="请输入公司简介" 
              :maxlength="1000"
              :count="true"
              height="160"
            ></u-textarea>
          </u-form-item>
        </view>

        <view class="form-section">
          <view class="section-title">联系信息</view>
          
          <u-form-item label="联系人" prop="contactPerson">
            <u-input v-model="formData.contactPerson" placeholder="请输入联系人" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="联系电话" prop="contactPhone">
            <u-input v-model="formData.contactPhone" placeholder="请输入联系电话" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="联系邮箱" prop="contactEmail">
            <u-input v-model="formData.contactEmail" placeholder="请输入联系邮箱" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="服务热线" prop="serviceHotline">
            <u-input v-model="formData.serviceHotline" placeholder="请输入服务热线" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="营业时间" prop="businessHours">
            <u-input v-model="formData.businessHours" placeholder="请输入营业时间" clearable></u-input>
          </u-form-item>
        </view>

        <view class="form-section">
          <view class="section-title">支付信息</view>
          
          <u-form-item label="收款二维码">
            <view class="disabled-upload-section">
              <FileUpload
                v-model="paymentQrCodeFiles"
                :upload-type="'PAYMENT_QR'"
                :upload-source="'APP'"
                :multiple="false"
                :max-size="2"
                :allowed-types="['jpg', 'jpeg', 'png']"
                :disabled="true"
                tip="请上传收款二维码图片，只能上传一个文件"
                @on-success="handlePaymentQrCodeSuccess"
                @on-error="handleUploadError"
              />
              <view class="disabled-tip">
                <u-icon name="info-circle" size="16" color="#409eff"></u-icon>
                <text>请物业公司通过审核后再补齐图片信息！</text>
              </view>
            </view>
          </u-form-item>
          
          <u-form-item label="收款账户" prop="paymentAccount">
            <u-input v-model="formData.paymentAccount" placeholder="请输入收款账户" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="开户银行" prop="paymentBank">
            <u-input v-model="formData.paymentBank" placeholder="请输入开户银行" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="微信支付商户号" prop="wechatPayMerchantId">
            <u-input v-model="formData.wechatPayMerchantId" placeholder="请输入微信支付商户号" clearable></u-input>
          </u-form-item>
          
          <u-form-item label="支付宝商户号" prop="alipayMerchantId">
            <u-input v-model="formData.alipayMerchantId" placeholder="请输入支付宝商户号" clearable></u-input>
          </u-form-item>
        </view>

        <view class="form-section">
          <view class="section-title">其他信息</view>
          
          <u-form-item label="公司Logo">
            <view class="disabled-upload-section">
              <FileUpload
                v-model="companyLogoFiles"
                :upload-type="'COMPANY_LOGO'"
                :upload-source="'APP'"
                :multiple="false"
                :max-size="2"
                :allowed-types="['jpg', 'jpeg', 'png']"
                :disabled="true"
                tip="请上传公司Logo图片，只能上传一个文件"
                @on-success="handleCompanyLogoSuccess"
                @on-error="handleUploadError"
              />
              <view class="disabled-tip">
                <u-icon name="info-circle" size="16" color="#409eff"></u-icon>
                <text>请物业公司通过审核后再补齐图片信息！</text>
              </view>
            </view>
          </u-form-item>
          
          <u-form-item label="备注" prop="remark">
            <u-textarea 
              v-model="formData.remark" 
              placeholder="请输入备注信息" 
              :maxlength="300"
              :count="true"
              height="120"
            ></u-textarea>
          </u-form-item>
        </view>
      </u-form>
    </view>
    
    <view class="bottom-actions">
      <u-button type="primary" text="提交注册" :loading="loading" @click="handleSubmit"></u-button>
    </view>
  </view>
</template>

<script>
import { propertyCompanyApi } from '@/api/property.js'
import FileUpload from '@/components/FileUpload.vue'

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      loading: false,
      showQualificationPicker: false,
      showDatePicker: false,
      qualificationColumns: [['一级', '二级', '三级']],
      paymentQrCodeFiles: [],
      companyLogoFiles: [],
      formData: {
        companyName: '',
        companyCode: '',
        creditCode: '',
        businessLicense: '',
        legalRepresentative: '',
        contactPerson: '',
        contactPhone: '',
        contactEmail: '',
        address: '',
        establishedDate: '',
        registeredCapital: '',
        serviceScope: '',
        qualificationLevel: '',
        paymentQrCode: '',
        paymentAccount: '',
        paymentBank: '',
        paymentLink: '',
        wechatPayMerchantId: '',
        alipayMerchantId: '',
        companyLogo: '',
        introduction: '',
        businessHours: '',
        serviceHotline: '',
        remark: ''
      },
      formRules: {
        companyName: [
          { required: true, message: '请输入公司名称' },
          { min: 2, max: 100, message: '公司名称长度在2到100个字符' }
        ],
        companyCode: [
          { required: true, message: '请输入公司编码' },
          { min: 2, max: 50, message: '公司编码长度在2到50个字符' }
        ],
        contactPerson: [
          { required: true, message: '请输入联系人' },
          { min: 2, max: 50, message: '联系人长度在2到50个字符' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
        ],
        contactEmail: [
          { required: true, message: '请输入联系邮箱' },
          { type: 'email', message: '请输入正确的邮箱地址' }
        ],
        address: [
          { required: true, message: '请输入公司地址' }
        ],
        qualificationLevel: [
          { required: true, message: '请选择资质等级' }
        ],
        serviceHotline: [
          { pattern: /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8}|400-?\d{3}-?\d{4}|800-?\d{3}-?\d{4})$/, message: '服务热线格式不正确，支持手机号或常见热线号格式' }
        ]
      }
    }
  },
  methods: {
    onQualificationConfirm(e) {
      this.formData.qualificationLevel = e.value[0]
      this.showQualificationPicker = false
    },
    
    onDateConfirm(e) {
      this.formData.establishedDate = this.formatDate(e)
      this.showDatePicker = false
    },
    
    formatDate(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    // 收款二维码上传成功处理
    handlePaymentQrCodeSuccess(response, file, fileList) {
      if (response && response.data && response.data.fileUrl) {
        this.formData.paymentQrCode = response.data.fileUrl
      }
    },
    
    // 公司Logo上传成功处理
    handleCompanyLogoSuccess(response, file, fileList) {
      if (response && response.data && response.data.fileUrl) {
        this.formData.companyLogo = response.data.fileUrl
      }
    },
    
    // 文件上传错误处理
    handleUploadError(error, file, fileList) {
      console.error('文件上传失败:', error)
      uni.showToast({
        title: '文件上传失败，请重试',
        icon: 'none'
      })
    },
    
    async handleSubmit() {
      try {
        const valid = await this.$refs.formRef.validate()
        if (!valid) return
        
        this.loading = true
        // 调用注册API
        await propertyCompanyApi.registerPropertyCompany(this.formData)
        uni.showToast({ title: '注册申请提交成功，请等待审核', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 2000)
      } catch (error) {
        uni.showToast({ title: '注册失败', icon: 'error' })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.company-register-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120px;
}

.register-form {
  padding: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f0f0f0;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3rpx;
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
}

/* 表单项样式优化 */
:deep(.u-form-item) {
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.u-form-item__body) {
  padding: 0;
}

:deep(.u-form-item__body__left) {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

:deep(.u-form-item__body__right) {
  flex: 1;
}

/* 输入框样式优化 */
:deep(.u-input) {
  background-color: #f8f9fa;
  border: 1rpx solid #e9ecef;
  border-radius: 8rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  
  &:focus {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 2rpx rgba(102, 126, 234, 0.1);
  }
}

/* 文本域样式优化 */
:deep(.u-textarea) {
  background-color: #f8f9fa;
  border: 1rpx solid #e9ecef;
  border-radius: 8rpx;
  padding: 20rpx 24rpx;
  font-size: 28rpx;
  
  &:focus {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 2rpx rgba(102, 126, 234, 0.1);
  }
}

/* 选择器样式优化 */
:deep(.u-picker) {
  .u-picker__action {
    color: #667eea;
  }
}

/* 按钮样式优化 */
:deep(.u-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: 600;
  
  &:active {
    transform: scale(0.98);
  }
}

/* 禁用上传区域样式 */
.disabled-upload-section {
  position: relative;
}

.disabled-upload-section .upload-area {
  opacity: 0.6;
  pointer-events: none;
}

.disabled-tip {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1rpx solid #b3d8ff;
  border-radius: 8rpx;
  color: #409eff;
  font-size: 28rpx;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1);
}

.disabled-tip text {
  margin-left: 12rpx;
  line-height: 1.4;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .register-form {
    padding: 16rpx;
  }
  
  .form-section {
    padding: 24rpx;
    margin-bottom: 16rpx;
  }
  
  .section-title {
    font-size: 30rpx;
    margin-bottom: 24rpx;
  }
  
  :deep(.u-form-item__body__left) {
    font-size: 26rpx;
  }
  
  :deep(.u-input),
  :deep(.u-textarea) {
    padding: 16rpx 20rpx;
    font-size: 26rpx;
  }
}

/* 动画效果 */
.form-section {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  }
}

.section-title::before {
  transition: all 0.3s ease;
}

.form-section:hover .section-title::before {
  width: 8rpx;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
</style> 